<script lang="ts" setup>

const { t, locale } = useI18n();
const route = useRoute()
const showSheet = ref(false)
const selectedAddress = ref()
const isDelete = ref(false)
const setDefault = ref(false)
const formRef = ref()
import { Form } from 'vee-validate';
import * as yup from 'yup';


definePageMeta({
    layout: 'header-back',
    title: 'account_management'
})

/** 获取虚拟钱包列表 */
const {
  data: walletList,
  runAsync: runAsyncWalletList,
} = useRequest(ApiFinanceWithdrawWallet, {
  onSuccess(res) {
    console.log(walletList)
    showSheet.value = false
  },
})

const {
  run: runMemberWalletUpdate,
  loading: updateWalletLoading,
} = useRequest(ApiMemberWalletUpdate, {
  onSuccess() {
    message.success(t('edit_success'))
    runAsyncWalletList({ currency_id: route.query.currency_id as string, contract_type: route.query.contract_type as string })
  },
})

const { run: runDelete, loading: deleteWalletLoading, } = useRequest(ApiMemberWalletDelete, {
  async onSuccess() {
    message.success(t('delete_success'))
    runAsyncWalletList({ currency_id: route.query.currency_id as string, contract_type: route.query.contract_type as string })
  },
})

await application.allSettled([
  runAsyncWalletList({ currency_id: route.query.currency_id as string, contract_type: route.query.contract_type as string })
])

const schema = yup.object().shape({
  address: yup.string().required(t('wallet_address_placeholder')).matches(virtualCoinAddressReg, t('wrong_format_address')),
  password: yup.string().required(t('money_password_placeholder')).min(6, '密码至少需要6个字符')
});

function handleEdit(){
  const { values } = formRef.value
    if(isDelete.value){
        runDelete({
        id: selectedAddress.value.id as string,
        pay_password: values.password,
        auth_type: 2,
        })
        return
    }
    runMemberWalletUpdate({
      id: selectedAddress.value.id as string,
      address: values.address,
      is_default: setDefault.value ? 1 : 2,
      pay_password: values.password,
      auth_type: 2,
    })
}

function setShowSheet(item: VirtualCoin, deleteIt: boolean) {
    showSheet.value = true;
    selectedAddress.value = item;
    isDelete.value = deleteIt
}

</script>

<template>
  <div class="m-[1rem] px-[1rem] rounded-[.5rem] bg-bg-black-4 mb-[3.75rem]">
    <template v-for="item in walletList?.d ||[]" :key="item.id">
        <AppAddressListItem @delete="() => setShowSheet(item, true)" @edit="() => setShowSheet(item, false)" :currency_id="route.query.currency_id as CurrencyCode" :contract_name="item.contract_name" :address="item.address" :currency_name="route.query.currency_name as string"/>
    </template>
    <BaseSheet
        v-model="showSheet"
        :title="isDelete ? t('confirm_for_delete') : t('edit')"
      >
        <div class="text-center" v-if="isDelete">{{t('confirm_if_delete')}}</div>
        <div class="px-[1rem] mb-[2rem]">
            <Form :validation-schema="schema" @submit="handleEdit" ref="formRef">
                <BaseInput class="mt-[1rem]" :label="t('common_currency')" name="currency_name" :modelValue="route.query.currency_name as string" disabled>
                </BaseInput>
                <BaseInput class="mt-[1rem]" :label="t('common_chain_network')" name="contract_name" :modelValue="selectedAddress.contract_name" disabled>
                </BaseInput>
                <BaseInput class="mt-[1rem]" :label="t('withdraw_address')" name="address" :modelValue="selectedAddress.address" :disabled="isDelete">
                </BaseInput>
                <BaseInput class="mt-[1rem]" :label="t('money_password')" name="password" type="password" :placeholder="t('money_password_placeholder')">
                </BaseInput>
                <BaseCheckbox :checked="setDefault" @click="setDefault = !setDefault" :label="t('set_as_default_withdraw_account')" class="mt-[.75rem] mb-[1rem]" v-if="!isDelete"/>
                <div class="flex gap-[.625rem]">
                    <BaseButton :loading="false" @click="showSheet = false" class="w-full h-[2.5rem] mt-[1rem] text-text-black-10 text-[.75rem]" type="secondary">
                    {{t('common_cancel')}}
                    </BaseButton>
                    <BaseButton :loading="isDelete ? deleteWalletLoading : updateWalletLoading" class="w-full h-[2.5rem] mt-[1rem] text-text-black-10 text-[.75rem]" html-type="submit">
                    {{isDelete ? t('confirm_delete') : t('confirm_edit')}}
                    </BaseButton>
                </div>
            </Form>
        </div>
    </BaseSheet>
  </div>
</template>

<style lang="scss"></style>
